/*
 * @Description:通用面板标题行，包括标题，操作
 * @Author: Rfan
 * @Date: 2022-03-09 16:48:29
 * @LastEditTime: 2022-05-28 10:11:21
 */

import { useMemo, useState } from 'react';
import { Button, Space } from 'antd';
import classNames from 'classnames/bind';
import { useMetadataContext } from '../contexts/MetaContext';

import styles from '../styles/metadataPane.module.scss';
import AddDialog from './dialogs/AddDialog';

const cx = classNames.bind(styles);

const PaneOperate = ({ title }: any) => {
  const { selectLevel } = useMetadataContext();

  const [addDialogVisible, setAddDialogVisible] = useState(false);

  const showDialog = () => {
    setAddDialogVisible(true);
  };

  return (
    <>
      <div className={cx('metadata-header')}>
        <div className={cx('title')}>{title}元数据信息</div>
        <div className={cx('operate')}>
          <Space>
            <Button disabled={selectLevel?.level === undefined} onClick={showDialog}>
              新建字段
            </Button>
            {/* TODO: 注释与删除disable属性 #演示相关#  */}
            {/* <Button disabled>删除字段</Button> */}
            <Button>导入</Button>
            <Button>导出</Button>
            <Button>备份</Button>
            <Button>恢复</Button>
          </Space>
        </div>
      </div>
      {useMemo(
        () => (
          <AddDialog
            visible={addDialogVisible}
            onClose={() => {
              setAddDialogVisible(false);
            }}
          />
        ),
        [addDialogVisible]
      )}
    </>
  );
};

export default PaneOperate;
